<template>
  <div class="app-table-group">
    <el-form ref="form" :inline="true" :label-position="'right'" :model="queryForm" size="small">
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="queryForm.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="queryForm.nickname"></el-input>
      </el-form-item>
      <div style="text-align: right">
        <el-button type="primary" size="small" @click="queryListData">查询</el-button>
        <el-button type="primary" size="small" @click="handlerAdd" plain>新增</el-button>
        <el-button type="primary" size="small" @click="resetQueryForm" plain>重置</el-button>
      </div>
    </el-form>
    <div class="app-table">
      <el-table
          :data="tableData"
          header-cell-class-name="table-header-cell"
          style="width: 100%"
      >
        <el-table-column
            prop="username"
            label="用户名"
        >
        </el-table-column>
        <el-table-column
            prop="nickname"
            label="昵称"
        >
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号"
        >
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
        >
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="handlerView(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" @click="handlerEdit(scope.row)" size="small">编辑</el-button>
            <el-button v-if="scope.row.status === 0" type="text" @click="handlerDisable(scope.row)" size="small">禁用
            </el-button>
            <el-button v-else type="text" @click="handlerEnable(scope.row)" size="small">启用</el-button>
            <el-button type="text" @click="openResetPwd(scope.row)" size="small">修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="app-page">
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page.sync="queryForm.pageNum"
          :page-size.sync="queryForm.pageSize"
          background
          layout="sizes,prev, pager, next"
          :page-sizes="[5, 10, 50]"
          :total="total">
      </el-pagination>
    </div>
    <edit v-if="edit.editToggle" :title="edit.title" :view="edit.view" :primaryKey="edit.primaryKey"
          :callback="editCloseCallback"></edit>
    <el-dialog :title="'修改密码'" v-if="control.resetPwdVisible" visible="visible" :before-close="closeResetPwd">
      <el-form ref="resetPwdForm" :rules="rules" :model="resetPwdFormData">
        <el-row>
          <el-col>
            <el-form-item label="新密码" prop="password" label-width="110px">
              <el-input type="password" v-model="resetPwdFormData.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="确认密码" prop="confirm" label-width="110px">
              <el-input type="password" v-model="resetPwdFormData.confirm" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeResetPwd">取 消</el-button>
        <el-button type="primary" @click="submitResetPwd">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getListPage, disable, enable, resetPwd} from '@/api/system/user'
import formValid from "@/utils/validate.form";
import Edit from "@/views/system/user/edit";

export default {
  components: {Edit},
  data() {
    return {
      tableData: [],
      total: 0,
      queryForm: {
        username: undefined,
        nickname: undefined,
        pageSize: 10,
        pageNum: 1
      },
      edit: {
        primaryKey: undefined,
        editToggle: false,
        view: false,
        title: "新增用户"
      },
      resetPwdFormData: {
        password: undefined,
        confirm: undefined
      },
      control: {
        resetPwdVisible: false
      },
      optId: undefined,
      rules: {
        "password": [
          {required: true, message: "密码不能为空", trigger: 'blur'},
          {validator: formValid.validPassword(), trigger: 'blur'}
        ],
        "confirm": [
          {required: true, message: "密码不能为空", trigger: 'blur'},
          {validator: formValid.validPassword(), trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.queryListData();
  },
  methods: {
    pageSizeChange(val) {
      this.queryForm.pageSize = val;
      this.queryListData();
    },
    pageNumChange(val) {
      this.queryForm.pageNum = val;
      this.queryListData();
    },
    resetQueryForm() {
      for (let key in this.queryForm) {
        if (key !== 'pageSize' && key !== 'pageNum') {
          this.$set(this.queryForm, key, undefined);
        }
      }
    },
    queryListData() {
      getListPage(this.queryForm).then(response => {
        this.tableData = response.list;
        this.total = response.total;
      })
    },
    editCloseCallback(isModify) {
      if (isModify) {
        this.queryListData();
      }
      this.edit.editToggle = false;
    },
    handlerAdd() {
      this.edit.primaryKey = undefined;
      this.edit.title = "新增用户";
      this.edit.view = false;
      this.edit.editToggle = true;
    },
    handlerEdit(row) {
      this.edit.primaryKey = row.id;
      this.edit.title = "修改用户";
      this.edit.view = false;
      this.edit.editToggle = true;
    },
    handlerDisable(row) {
      this.$confirm("确认禁用\"" + row.nickname + "\"？").then(() => {
        disable(row.id).then(rsp => {
          if (rsp.status === "1") {
            this.$message.success("操作成功!");
            this.queryListData();
          }
        })
      })
    },
    handlerEnable(row) {
      this.$confirm("确认启用\"" + row.nickname + "\"？").then(() => {
        enable(row.id).then(rsp => {
          if (rsp.status === "1") {
            this.$message.success("操作成功!");
            this.queryListData();
          }
        })
      })
    },
    handlerView(row) {
      this.edit.primaryKey = row.id;
      this.edit.title = "查看用户";
      this.edit.view = true;
      this.edit.editToggle = true;
    },
    openResetPwd(row) {
      this.optId = row.id;
      this.control.resetPwdVisible = true;
    },
    closeResetPwd() {
      this.control.resetPwdVisible = false;
      this.clearResetPwd();
    },
    clearResetPwd() {
      this.optId = undefined;
      this.resetPwdFormData.password = undefined;
      this.resetPwdFormData.confirm = undefined;
    },
    submitResetPwd() {
      let data = {
        id: this.optId,
        password: this.resetPwdFormData.password
      }
      this.$refs['resetPwdForm'].validate((valid) => {
        if (valid) {
          if (this.resetPwdFormData.password !== this.resetPwdFormData.confirm) {
            this.$message.error("两次密码输入不一致");
            return false;
          }
          resetPwd(data).then(rsp => {
            if (rsp.status === "1") {
              this.$message.success("操作成功!");
              this.closeResetPwd();
            }
          })
          return true;
        } else {
          return false;
        }
      })

    }
  }
}
</script>